<!--suppress ALL -->
<template>
    <div class="card rdsp-card-view" data-page="fireRoomDuty">
        <div class="card-content rank-content card-content-padding fireRoomDuty-container">
            <div class="rdsp-card-title">
                <div class="left-title">消控室值守</div>
            </div>
            <div class="rdsp-card-con">
              <div class="fireRoomDuty-top">
                <div id="fireRoomDuty-swiper"  class="swiper-container">
                  <div class="swiper-pagination" id="fireRoomDuty_pagination"></div>
                  <div class="swiper-wrapper" id="fireRoomDuty_swiper"></div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    return {
        data: function () {
            return {
            }
        },
        methods: {
          getFireRoomVedio:function(){
            var self = this;
            var $ = self.$$;
            videoData = [];
            $("#fireRoomDuty_swiper").empty();
            Dao.getControlRoomInfo({
                userName:userInfor.accountName,
                orgId:single_Orgid
            },function(data){
                if(data && data.length>0){
                  var flag = false;
                  if (data.length > 1){flag = true;}
                  for(var i=0;i<data.length;i++){
                    videoData[data[i].video.id] = data[i].video;
                    var text = "";
                    var color = "";
                    if(data[i].isDuty==1){
                      text = "有人值守";
                      color = "#378bf6";
                    }else{
                      text = "无人值守";
                      color = "#999";
                    }
                    $("#fireRoomDuty_swiper").append(`
                        <div class="swiper-slide" id="vedio_swiper_`+data[i].video.id+`">
                            <div class="every-vedio-swiper">
                                <div class="left">
                                   <img src="`+picNo(data[i].pictureUrl)+`" onerror="this.onerror=null; this.src='`+picVedioNo()+`'">
                                   <div class="right right-find-btn" data-id="`+data[i].video.id+`">
                                       <div class="right-top">
                                         <span class="iconfont icon-ren" style="color:`+color+`"></span>`+text+`
                                       </div>
                                       <div class="right-center">
                                         <div>已持续`+common.transNullundefinedToline(self.formatFireTime(common.getSecondsFormat(data[i].durationTime/1000)))+`</div>
                                         <div>`+data[i].video.name+`</div>
                                       </div>
                                   </div>
                                </div>
                            </div>
                        </div>
                    `);
                  }
                  if (flag){
                  var vedio_swiper = new Swiper('#fireRoomDuty-swiper', {
                        direction: 'horizontal',
                        loop: true,
                        autoplay: 5000,
                        slidesPerView: "auto",
                        centeredSlides: true,
                        spaceBetween: 10,
                        pagination: {
                            el: '#fireRoomDuty_pagination',
                        },
                  });
                  }
                  var timer = 0 ;
                    $(".right-find-btn").click(function (event) {
                        if (0 === timer) {
                            timer = 1;
                            var id = jQuery(event.currentTarget).attr("data-id");
                            self.playVedio(id);
                            if (1 === timer) {
                                setTimeout(() => {
                                    timer = 0;
                                }, 4000);
                            }
                        }else{
                            app.methods.showToastCenter("请勿频繁点击。");
                        }
                    });
                }else{
                  $("#fireRoomDuty_swiper").append(`<div class="no-data-img"><img src="`+ listNoDataPic() +`"/></div>`);
                  $("#fireRoomDuty_pagination").hide();
                }
            },false);
          },
          formatFireTime : function(time){
              if(time){
                return time.replace("时","小时").replace("分","分钟");
              }
          },
          playVedio:function(id){
            var bean = videoData[id];
            var videoBean  = {};
            videoBean.id = bean.id;
            videoBean.deviceId = bean.deviceId;
            videoBean.type = bean.type;
            videoBean.name = bean.name;
            videoBean.channel = bean.channel;
            videoBean.status = bean.status;
            videoBean.picUrl = bean.picUrl;
            videoBean.isOnline = bean.isOnline;
            videoBean.isConcem = bean.isConcem == null?0:bean.isConcem;
            Dao.getAuthList({
               userName:userInfor.accountName,
               deviceId:appKeyObj.deviceId,
               organizationId:single_Orgid,
               equiptType:bean.type,
               orgCode:userInfor.org.orgCode,
               authId: bean.authId
            },function(data) {
                var videoKeyBean = data[0];
                native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(videoBean));
            });
          }
        },
        on: {
            pageInit: function(e, page) {
              
            },
            pageAfterIn: function(e, page) {
              var self = this;
              self.getFireRoomVedio();
            },
      }
    }
</script>
